import React, { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { Search, MapPin, Calendar, Users, Clock, Filter, ChevronRight } from 'lucide-react';
import { useAppStore } from '../stores/appStore';
import { BottomNav } from '../components/BottomNav';

const ActivitiesPage: React.FC = () => {
  const navigate = useNavigate();
  const { activities } = useAppStore();
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [selectedAgeRange, setSelectedAgeRange] = useState('全部');
  const [selectedLocation, setSelectedLocation] = useState('全部');
  const [showFilters, setShowFilters] = useState(false);

  const categories = ['全部', '亲子手工', '户外探索', '音乐律动', '绘本共读', '科学实验', '烘焙制作'];
  const ageRanges = ['全部', '0-2岁', '3-5岁', '6-8岁', '9-12岁'];
  const locations = ['全部', '北京市', '上海市', '广州市', '深圳市', '杭州市'];

  const filteredActivities = useMemo(() => {
    return activities.filter(activity => {
      const matchesSearch = activity.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           activity.description.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesCategory = selectedCategory === '全部' || activity.category === selectedCategory;
      const matchesAgeRange = selectedAgeRange === '全部' || activity.ageRange === selectedAgeRange;
      const matchesLocation = selectedLocation === '全部' || activity.location.includes(selectedLocation);
      
      return matchesSearch && matchesCategory && matchesAgeRange && matchesLocation;
    });
  }, [activities, searchTerm, selectedCategory, selectedAgeRange, selectedLocation]);

  const ActivityCard: React.FC<{ activity: any }> = ({ activity }) => (
    <div 
      className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1"
      onClick={() => navigate(`/activities/${activity.id}`)}
    >
      <div className="relative">
        <img
          src={activity.image}
          alt={activity.title}
          className="w-full h-48 object-cover"
        />
        <div className="absolute top-4 left-4">
          <span className="bg-primary-500 text-white px-3 py-1 rounded-full text-sm font-medium">
            {activity.category}
          </span>
        </div>
        {activity.spots <= 5 && (
          <div className="absolute top-4 right-4">
            <span className="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium">
              仅剩 {activity.spots} 位
            </span>
          </div>
        )}
      </div>
      
      <div className="p-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">
          {activity.title}
        </h3>
        <p className="text-gray-600 text-sm mb-4 line-clamp-2">
          {activity.description}
        </p>
        
        <div className="space-y-2 mb-4">
          <div className="flex items-center text-sm text-gray-500">
            <Calendar className="w-4 h-4 mr-2" />
            {activity.date} {activity.time}
          </div>
          <div className="flex items-center text-sm text-gray-500">
            <MapPin className="w-4 h-4 mr-2" />
            {activity.location}
          </div>
          <div className="flex items-center text-sm text-gray-500">
            <Users className="w-4 h-4 mr-2" />
            {activity.ageRange} · {activity.spots} 个名额
          </div>
        </div>
        
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <span className="text-2xl font-bold text-primary-600">¥{activity.price}</span>
            {activity.originalPrice && activity.originalPrice > activity.price && (
              <span className="text-sm text-gray-400 line-through">¥{activity.originalPrice}</span>
            )}
          </div>
          
          <button className="flex items-center text-primary-600 hover:text-primary-700 font-medium">
            立即报名
            <ChevronRight className="w-4 h-4 ml-1" />
          </button>
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-accent-50 pb-20">
      {/* Header */}
      <div className="bg-white shadow-sm sticky top-0 z-40">
        <div className="max-w-6xl mx-auto px-4 py-4">
          <h1 className="text-xl font-bold text-gray-800 text-center">亲子活动</h1>
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-4 py-6">
        {/* Search and Filter */}
        <div className="mb-6 space-y-4">
          {/* Search Bar */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              type="text"
              placeholder="搜索活动、地点、主题..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            />
          </div>

          {/* Filter Toggle */}
          <div className="flex items-center justify-between">
            <button
              onClick={() => setShowFilters(!showFilters)}
              className="flex items-center px-4 py-2 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow"
            >
              <Filter className="w-4 h-4 mr-2" />
              筛选条件
              <ChevronRight className={`w-4 h-4 ml-2 transition-transform ${showFilters ? 'rotate-90' : ''}`} />
            </button>
            
            <div className="text-sm text-gray-500">
              共找到 {filteredActivities.length} 个活动
            </div>
          </div>

          {/* Filter Options */}
          {showFilters && (
            <div className="bg-white rounded-xl p-4 space-y-4 shadow-sm">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">活动类型</label>
                <div className="flex flex-wrap gap-2">
                  {categories.map(category => (
                    <button
                      key={category}
                      onClick={() => setSelectedCategory(category)}
                      className={`px-3 py-1 rounded-full text-sm transition-colors ${
                        selectedCategory === category
                          ? 'bg-primary-500 text-white'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                    >
                      {category}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">适读年龄</label>
                <div className="flex flex-wrap gap-2">
                  {ageRanges.map(ageRange => (
                    <button
                      key={ageRange}
                      onClick={() => setSelectedAgeRange(ageRange)}
                      className={`px-3 py-1 rounded-full text-sm transition-colors ${
                        selectedAgeRange === ageRange
                          ? 'bg-primary-500 text-white'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                    >
                      {ageRange}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">活动地点</label>
                <div className="flex flex-wrap gap-2">
                  {locations.map(location => (
                    <button
                      key={location}
                      onClick={() => setSelectedLocation(location)}
                      className={`px-3 py-1 rounded-full text-sm transition-colors ${
                        selectedLocation === location
                          ? 'bg-primary-500 text-white'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                    >
                      {location}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Featured Activities */}
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-gray-800 mb-4">精选推荐</h2>
          <div className="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl p-6 text-white">
            <div className="flex flex-col md:flex-row items-center justify-between">
              <div className="mb-4 md:mb-0">
                <h3 className="text-xl font-bold mb-2">周末亲子手工坊</h3>
                <p className="text-primary-100 mb-4">和孩子一起制作可爱的小手工，培养动手能力</p>
                <div className="flex items-center space-x-4 text-sm">
                  <div className="flex items-center">
                    <Calendar className="w-4 h-4 mr-1" />
                    本周六
                  </div>
                  <div className="flex items-center">
                    <MapPin className="w-4 h-4 mr-1" />
                    全市多个地点
                  </div>
                </div>
              </div>
              <button className="bg-white text-primary-600 px-6 py-3 rounded-xl font-medium hover:bg-primary-50 transition-colors">
                立即报名
              </button>
            </div>
          </div>
        </div>

        {/* Activities Grid */}
        <div>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-gray-800">全部活动</h2>
            <div className="text-sm text-gray-500">
              {filteredActivities.length} 个活动
            </div>
          </div>
          
          {filteredActivities.length === 0 ? (
            <div className="text-center py-12">
              <div className="text-6xl mb-4">🎨</div>
              <h3 className="text-lg font-medium text-gray-800 mb-2">暂无相关活动</h3>
              <p className="text-gray-500 mb-4">试试调整筛选条件或搜索关键词</p>
              <button
                onClick={() => {
                  setSearchTerm('');
                  setSelectedCategory('全部');
                  setSelectedAgeRange('全部');
                  setSelectedLocation('全部');
                }}
                className="px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors"
              >
                清除筛选
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredActivities.map(activity => (
                <ActivityCard key={activity.id} activity={activity} />
              ))}
            </div>
          )}
        </div>
      </div>

      <BottomNav />
    </div>
  );
};

export default ActivitiesPage;